<template>
  <view>
    <view class="nav-wrap">
      <u-icon
        class="icon"
        color="rgb(0, 0, 0)"
        size="20"
        name="arrow-left"
        @click="goback"
      ></u-icon>
      <view class="text">{{ reportid ? "体检报告" : "添加体检报告" }}</view>
    </view>
    <view class="report-wrap box-wrap">
      <view class="report-row">
        <text class="report-cell text-key cell-border">
          {{ ExaminationReportText[ExaminationReportKeys.ExaminationTime] }}
        </text>
        <text class="report-cell text-val cell-border">
          <uni-datetime-picker
            :clear-icon="false"
            type="date"
            :border="false"
            end="2029-6-20"
            @change="changeUploadTime"
          >
            <view
              class="wrap"
              @click="
                () => togglePicker(true, ExaminationReportKeys.ExaminationTime)
              "
            >
              <view class="item-left">
                <input
                  disabled
                  type="text"
                  class="input-font"
                  placeholder="请选择体检时间"
                  :value="reportInfo[ExaminationReportKeys.ExaminationTime]"
                  @input="
                    (e) => changeVal(e, ExaminationReportKeys.ExaminationTime)
                  "
                />
              </view>
              <view class="item-right">
                <u-icon
                  color="rgb(0, 0, 0)"
                  size="14"
                  name="arrow-right"
                ></u-icon>
              </view>
            </view>
          </uni-datetime-picker>
        </text>
      </view>
      <view class="report-row">
        <text class="report-cell text-key cell-border">
          {{
            ExaminationReportText[ExaminationReportKeys.ExaminationOrganization]
          }}
        </text>
        <text class="report-cell text-val cell-border">
          <view class="wrap">
            <view class="item-left">
              <input
                type="text"
                class="input-font"
                placeholder="请输入体检机构名称"
                :value="
                  reportInfo[ExaminationReportKeys.ExaminationOrganization]
                "
                @input="
                  (e) =>
                    changeVal(e, ExaminationReportKeys.ExaminationOrganization)
                "
              />
            </view>
            <view class="item-right"> </view>
          </view>
        </text>
      </view>
      <view class="report-row">
        <text class="report-cell text-key cell-border">
          {{ ExaminationReportText[ExaminationReportKeys.ReportName] }}
        </text>
        <text class="report-cell text-val cell-border">
          <view class="wrap">
            <view class="item-left">
              <input
                type="text"
                class="input-font"
                placeholder="如：刘丽的2021入职体检报告"
                :value="reportInfo[ExaminationReportKeys.ReportName]"
                @input="(e) => changeVal(e, ExaminationReportKeys.ReportName)"
              />
            </view>
            <view class="item-right"> </view>
          </view>
        </text>
      </view>
      <view class="report-row">
        <view class="text-key pd-t">
          {{ ExaminationReportText[ExaminationReportKeys.ReportImg] }}
        </view>
        <view class="image-upload">
          <u-upload
            width="200rpx"
            height="200rpx"
            name="img"
            previewImage
            imageMode="aspectFill"
            :fileList="
              reportInfo[ExaminationReportKeys.ReportImg]
                ? [{ url: reportInfo[ExaminationReportKeys.ReportImg] }]
                : []
            "
            @delete="deletePic($event, ExaminationReportKeys.ReportImg)"
            @afterRead="uploadPic($event, ExaminationReportKeys.ReportImg)"
          />
        </view>
      </view>
      <view class="report-row">
        <view class="text-key pd-t">
          {{ ExaminationReportText[ExaminationReportKeys.ReportPDF] }}
        </view>
        <view class="image-upload">
          <u-upload
            accept="file"
            width="200rpx"
            height="200rpx"
            name="file"
            :fileList="
              reportInfo[ExaminationReportKeys.ReportPDF]
                ? [{ url: reportInfo[ExaminationReportKeys.ReportPDF] }]
                : []
            "
            @delete="deletePic($event, ExaminationReportKeys.ReportPDF)"
            @afterRead="uploadPic($event, ExaminationReportKeys.ReportPDF)"
          />
        </view>
      </view>
    </view>
    <view class="btn-wrap">
      <u-button
        v-if="!reportid"
        text="保存"
        class="searh-btn"
        @click="submit"
      ></u-button>
    </view>
  </view>
</template>

<script>
  import {
    defaultExaminationReport,
    ExaminationReportKeys,
    ExaminationReportCheckList,
    ExaminationReportText,
  } from "../helper";
  import { getStorage } from "@/utils/cookies.js";
  import { uploadUrl } from "@/utils/request.js";

  export default {
    onLoad({ reportid }) {
      this.reportid = reportid;
    },

    data() {
      return {
        reportInfo: { ...defaultExaminationReport },
        reportid: "",
      };
    },

    methods: {
      changeUploadTime(examinationTime) {
        this.reportInfo[ExaminationReportKeys.ExaminationTime] =
          examinationTime;
      },

      changeVal({ detail: { value } }, key) {
        this.reportInfo[key] = value;
      },

      togglePicker(isShowPicker, key) {
        this.isShowPicker = isShowPicker;
      },

      uploadPic(e, key) {
        const apiurl = uploadUrl("/api/upload_img");
        uni.uploadFile({
          url: apiurl,
          filePath: e.file.thumb,
          name: "file",
          header: {
            Authorized: getStorage(),
          },
          success: (res) => {
            if (res.statusCode === 200) {
              const {
                data: { url },
              } = JSON.parse(res.data);
              this.reportInfo[key] = url;
            } else {
              this.$u.toast("图片上传失败，请重试");
            }
          },
          fail: (err) => {
            this.$u.toast(err.errMsg);
            this.reportInfo[key] = "";
          },
        });
      },

      deletePic(e, key) {
        this.reportInfo[key] = "";
      },

      goback() {
        uni.navigateBack({});
      },

      submit() {
        console.log(this.reportInfo);
        let emptyKey = "";
        if (
          ExaminationReportCheckList.some((key) => {
            emptyKey = key;
            return !this.reportInfo[key];
          })
        ) {
          if (emptyKey === ExaminationReportKeys.ExaminationTime) {
            this.$u.toast(`请选择${ExaminationReportText[emptyKey]}`);
          } else {
            this.$u.toast(`请输入${ExaminationReportText[emptyKey]}`);
          }
          return;
        }
        if (
          !this.reportInfo[ExaminationReportKeys.ReportImg] &&
          !this.reportInfo[ExaminationReportKeys.ReportPDF]
        ) {
          this.$u.toast(`请上传报告PDF或者报告照片`);
          return;
        }
      },
    },

    computed: {
      ExaminationReportKeys: function () {
        return ExaminationReportKeys;
      },
      ExaminationReportText: function () {
        return ExaminationReportText;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .nav-wrap {
    overflow: hidden;
    height: 87rpx;
    background: $uni-bg-color;
    line-height: 87rpx;

    & .icon {
      position: relative;
      top: 50%;
      margin: -21rpx;
      left: 30rpx;
    }

    & .text {
      width: 750rpx;
      text-align: center;
      height: 87rpx;
      line-height: 87rpx;
      font-weight: bold;
    }
  }

  .pd-t {
    padding-top: 20rpx;
  }

  .image-upload {
    width: 200rpx;
    height: 200rpx;
  }

  .box-wrap {
    background: $uni-bg-color;
    padding: 0 20rpx 20rpx 20rpx;
  }

  .cell-border {
    border-bottom: 1rpx solid $uni-border-color;
  }

  .input-font {
    font-size: $uni-font-size-base;
  }

  .report-wrap {
    display: table;

    & .report-row {
      display: table-row;
      width: 750rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-weight: bold;

      & .report-cell {
        display: table-cell;
        width: 375rpx;

        & .wrap {
          display: table;

          & .item-left {
            width: 90%;
            display: table-cell;
          }

          & .item-right {
            display: table-cell;
            width: 10%;
          }
        }
      }

      & .text-key {
        text-align: left;
      }

      & .text-val {
        text-align: right;
      }
    }
  }

  .btn-wrap {
    background: $uni-bg-color;
    padding-top: 200rpx;
    padding-bottom: 200rpx;

    & .searh-btn {
      width: 650rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background-color: rgba(65, 171, 133, 1);
      color: #fff;
      font-weight: bold;
    }
  }
</style>
